<template>
  <el-container>
    <task-sidebar></task-sidebar>
    <el-main>
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        class="task-tree"
      >
      </el-input>

      <el-tree
        class="filter-tree"
        :data="tree"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree">
      </el-tree>
    </el-main>
  </el-container>
</template>

<script>
import taskSidebar from './sidebar'
import taskService from '../../api/task'

export default {
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  name: 'task-tree',
  mounted () {
    taskService.tree((data) => {
      this.tree = data
    })
  },
  data () {
    return {
      filterText: '',
      tree: [],
      defaultProps: {
        children: 'child',
        label: 'label'
      }
    }
  },
  components: {taskSidebar},
  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>
<style>
.task-tree {
  margin-bottom: 10px;
  width: 30%;
}

.el-tree-node__label {
  font-size: 18px;
}

.el-tree-node__content {
  padding: 3px;
}
</style>
